$(function(){

	//动态给col写入宽度
	// var $col = $('#canvasWrapper .col');
	// var iWidth = $col.width();
	// $col.css({
	// 	'width':iWidth
	// })

	//画布边框可拖拽改变大小
	

	// 左侧菜单可拖拽
	$('.image-list img').draggable({
		revert:true,
		proxy:'clone',
		onStartDrag:function(){
			$(this).draggable('options').cursor = 'not-allowed';
			$(this).draggable('proxy').css({
				'z-index':10,
				'width' : 200
			});
		},
		onStopDrag:function(){
			$(this).draggable('options').cursor='move';
		}
	});

	// 放置入画布
	$('.wrapper .col').droppable({
		onDragEnter:function(e,source){
			$(source).draggable('options').cursor='auto';
		},
		onDragLeave:function(e,source){
			$(source).draggable('options').cursor='not-allowed';
		},
		onDrop:function(e,source){
			// var name = $(source).find('p:eq(0)').html();
			// var price = $(source).find('p:eq(1)').html();
			// addProduct(name, parseFloat(price.split('$')[1]));
			var src = $(source).attr('src');
			var img = '<img src='+src+'>';
			$(this).html(img);
            $(this).find('img').dragging({
                move : 'both',
                restricted : false,
                changeSize : true,
                supportDelete : true,
                reIndex : false,
                border: '1px solid #f5a351'
            });
		}
	});

	// 画布内图片可拖拽、更改大小
})